<style scoped>
    .article-container {
        width: 100%;
        margin: 0 auto;
    }
</style>

<template>
    <div class="article-container">
        <component v-for="item in items" :value='item.value' :is='item.component'>
        </component>
    </div>
</template>

<script>
    import articleService from 'services/article'
    import productService from 'services/product'
    import TextInput from 'article-components/text-input.vue'
    import ImageInput from 'article-components/image-input.vue'
    import Product from 'article-components/product.vue'
    import Carousel from 'util-components/carousel.vue'
    import HScroller from 'util-components/h-scroller.vue'
    import ArticleInput from 'article-components/article-input.vue'

    const temp_items = [
        {component: 'carousel', value: '[{"url": "/#!/guide/category/1", "img": "/static/1.jpeg", "title": "第一期：XXXXX"}, {"url": "/#!/guide/category/2", "img": "/static/2.jpeg", "title": "第二期：XXXXX"}, {"url": "/#!/guide/category/3", "img": "/static/3.jpeg", "title": "第三期：XXXXX"}]'},
        {component: 'h-scroller', value: '[{"url": "/guide/category/1", "img": "/static/1.jpeg", "title": "第一期"}, {"url": "/guide/category/2", "img": "/static/2.jpeg", "title": "第二期"}, {"url": "/guide/category/3", "img": "/static/3.jpeg", "title": "第三期"},{"url": "/guide/category/1", "img": "/static/1.jpeg", "title": "第四期"}, {"url": "/guide/category/2", "img": "/static/2.jpeg", "title": "第五期"}, {"url": "/guide/category/3", "img": "/static/3.jpeg", "title": "第六期"},{"url": "/guide/category/1", "img": "/static/1.jpeg", "title": "第七期"}, {"url": "/guide/category/2", "img": "/static/2.jpeg", "title": "第八期"}, {"url": "/guide/category/3", "img": "/static/3.jpeg", "title": "第九期"},{"url": "/guide/category/1", "img": "/static/1.jpeg", "title": "第十期"}, {"url": "/guide/category/2", "img": "/static/2.jpeg", "title": "第十一期"}, {"url": "/guide/category/3", "img": "/static/3.jpeg", "title": "第十二期"}]'},
        {component: 'text-input', value: '“攻略”在\n书面语\n和游戏中具有不同的释义，但都可以概括为“通盘的计划、策略和做法”。汉语中没有“攻略”这个词。于是引出《新民晚报》三篇讨论文章（分别刊于当年3月4日、3月11日、5月7日），第一篇是“质疑”，第二篇是“辟疑”，第三篇是日本朋友的议论。自此以后，“攻略”渐渐融入汉语，成为新闻媒体的“宠儿”。“攻略”一词其实是源自汉语、生长在日本、再流向汉语的一个典型个例。汉语中有个成语叫“攻城略地”，《汉语大词典》的解释是：“攻占城池，夺取土地。指征战。”日语的“攻略”正是由汉语的“攻城略地”缩略而成。'},
        {component: 'article-input', value: '{"src":"/static/1.jpeg","title":"可点击的XXX","article":"1"}'},
        {component: 'product', value: '{"src":"/static/1.jpeg","price":"100","id":"1"}'},
        {component: 'image-input', value: '/static/1.jpeg'},
        {component: 'text-input', value: '啊哈哈'},
        {component: 'image-input', value: '/static/2.jpeg'},
        {component: 'image-input', value: '/static/3.jpeg'},
        {component: 'text-input', value: '啊哈哈'},
        {component: 'image-input', value: '/static/4.jpeg'},
        {component: 'text-input', value: '啊哈哈'},
    ]

    export default {
        props: ['service'],
        data: () => ({items: []}),
        events: {
            'refresh-items': function(param) {
                return this.refresh_items(param)
                    .then(({items}) => { this.items = items });
            }
        },
        computed: {
            fetchService () {
                return (this.service && this.service === 'product')
                     ? productService.fetchArticle : articleService.fetch;
            }
        },
        route: {
            data ({to: {params, query}}) {
                return this.refresh_items(params.article || query.article);
            }
        },
        methods: {
            refresh_items (param) {
                return this.fetchService(param)
                    .then(({data}) => ({ items: data }), () => ({ items: temp_items }));
            }
        },
        components: {
            TextInput,
            ImageInput,
            Product,
            Carousel,
            HScroller,
            ArticleInput
        }
    }
</script>
